<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1.0,minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../css/all.css">
  <link rel="stylesheet" href="../font/font-awesome-4.7.0/css/font-awesome.min.css">
  <title>Kira-2018-决战世界杯</title>
</head>

<body>
  <div class="quiz" id="quizs" v-cloak>
    <div class="mask" v-show="show">
      <div class="alert">
        <span @click="close()" class="close">+</span>
        <ul>
          <li>押注<span>埃及</span>获胜</li>
          <li>节操剩余:{{ userInfo.coin }}</li>
          <li>
            <span @click="bet(10)" v-if="userInfo.coin >= 10">10<b>节操</b><i style="background-color: transparent;"></i></span>
            <span @click= "bet2" v-else>10<b>节操</b><i></i></span>

            <span @click="bet(50)" v-if="userInfo.coin >= 50">50<b>节操</b><i style="background-color: transparent;"></i></span>
            <span @click= "bet2" v-else>50<b>节操</b><i></i></span>

            <span @click="bet(250)" v-if="userInfo.coin >= 250">250<b>节操</b><i style="background-color: transparent;"></i></span>
            <span @click= "bet2" v-else>250<b>节操</b><i></i></span>

            <span @click="bet(1000)" v-if="userInfo.coin >= 1000">1000<b>节操</b><i style="background-color: transparent;"></i></span>
            <span @click= "bet2" v-else>1000<b>节操</b><i></i></span>
          </li>
          <li>
            <p>说明:</p>
            <p>1、押注后无法取消，请谨慎下注</p>
            <p>2、按90分钟为结算标准，90分钟为平局则该场比赛为平局</p>
            <p>3、竞猜纯粹娱乐，请勿过于投入</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="category">
      <ul>
        <li>
          <a href="./quiz-dynamic.html">竞猜动态</a>
        </li>
        <li class="active">单场竞猜</li>
        <li>
          <a href="./quiz-team.html">冠军竞猜</a>
        </li>
      </ul>
    </div>
    <div class="quiz-game">
      <div class="time-first">
        <ul class="quiz-start" v-for="(item, prantKey) in countries.common" :key="prantKey">
          <li class="quiz-title">
            <span class="quiz-time">{{ item.title.time }}<span>{{ item.title.sweek }}</span><span>{{ item.title.name }}</span></span>
          </li>
          <div class="quiz-status"  v-for="(list, index) in item.list" :key="index" >
            <li class="betting ended" v-if="list.status==0 ">
              <div class="bet-top">
                <ul>
                  <li class="cou-left">
                    <span>
                      <img :src="list.homeImg" alt="">
                    </span>
                    <span class="leftname">{{list.home}}</span>
                    <span class="bomm">已压:{{ list.homeJc }}</span>
                  </li>
                  <li class="score">
                    <span>已结束</span>
                    <span>{{ list.homeScore }} : {{ list.fromHomeScore }}</span>
                    <span class="bomm">押平:{{ list.draw }}</span>
                  </li>
                  <li class="cou-right">
                    <span>
                      <img :src="list.fromHomeImg" alt="">
                    </span>
                    <span class="rightname"> {{list.fromHome}} </span>
                    <span class="bomm">已压:{{ list.fromHomeJc }}</span>
                  </li>
                </ul>
              </div>
              <div class="bet-bom">
                  <span :style="'width:'+ list.homeJc / (list.homeJc + list.draw + list.fromHomeJc) * 100 +'%;'">{{list.allHomeScore + list.homeJc }}</span>
                  <span :style="'width:'+ list.draw / (list.homeJc + list.draw + list.fromHomeJc) * 100 +'%;'">{{ list.allDraw + list.draw }}</span>
                  <span :style="'width:'+ list.fromHomeJc / (list.homeJc + list.draw + list.fromHomeJc) * 100 +'%;'">{{ list.allFromHomeScore + list.fromHomeJc }}</span>
              </div>
              <div class="record">
                <a href="./record.html">竞猜记录
                    <i class="fa  fa-caret-right"></i></a>
              </div>
            </li>

            <li class="betting going" v-else-if="list.status==1">
              <div class="bet-top">
                <ul>
                  <li class="cou-left">
                    <span>
                      <img :src="list.homeImg" alt="">
                    </span>
                    <span class="leftname">{{list.home}}</span>
                    <span class="bomm">已压:{{ list.homeJc }}</span>
                  </li>
                  <li class="score">
                    <span class="running">比赛进行中</span>
                  </li>
                  <li class="cou-right">
                    <span>
                     <img :src="list.fromHomeImg" alt="">
                    </span>
                    <span class="rightname">{{list.fromHome}}</span>
                    <span class="bomm">已压:{{ list.fromHomeJc }}</span>
                  </li>
                </ul>
              </div>
              <div class="bet-bom">
                  <span :style="'width:'+ list.homeJc / (list.homeJc + list.draw + list.fromHomeJc) * 100 +'%;'">{{list.allHomeScore + list.homeJc }}</span>
                  <span :style="'width:'+ list.draw / (list.homeJc + list.draw + list.fromHomeJc) * 100 +'%;'">{{ list.allDraw + list.draw }}</span>
                  <span :style="'width:'+ list.fromHomeJc / (list.homeJc + list.draw + list.fromHomeJc) * 100 +'%;'">{{ list.allFromHomeScore + list.fromHomeJc }}</span>
              </div>
              <div class="record">
                  <a href="./record.html">竞猜记录
                      <i class="fa  fa-caret-right"></i></a>
              </div>
            </li>

            <li class="betting Waiting" v-else-if="list.status==2">
              <div class="bet-top">
                <ul>
                  <li class="cou-left" @click="popShow('home',list,prantKey,index,'homeJc',item.id,list.cId)">
                    <span>
                      <img :src="list.homeImg" alt="">
                    </span>
                    <span>
                      <img src="../img/icon-redyz.png" alt="">
                    </span>
                    <span class="leftname">{{list.home}}</span>
                    <span class="bomm">已压:{{ list.homeJc }}</span>
                  </li>
                  <li class="wai-time" @click="popShow('平局',list,prantKey,index,'draw',item.id,list.cId)">
                    <span>未开始</span>
                    <span>{{ list.startTime }}</span>
                    <span>
                      <img src="../img/icon-grepzj.png" alt="">
                    </span>
                    <span class="bomm">押平:{{ list.draw }}</span>
                  </li>
                  <li class="cou-right" @click="popShow('fromHome',list,prantKey,index,'fromHomeJc',item.id,list.cId)">
                    <span>
                     <img :src="list.fromHomeImg" alt="">
                    </span>
                    <span>
                      <img src="../img/iocn-blueyz.png" alt="">
                    </span>
                    <span class="rightname">{{list.fromHome}}</span>
                    <span class="bomm">已压:{{ list.fromHomeJc }}</span>
                  </li>
                </ul>
              </div>
              <div class="bet-bom">
                  <span :style="'width:'+ list.homeJc / (list.homeJc + list.draw + list.fromHomeJc) * 100 +'%;'">{{list.allHomeScore + list.homeJc }}</span>
                  <span :style="'width:'+ list.draw / (list.homeJc + list.draw + list.fromHomeJc) * 100 +'%;'">{{ list.allDraw + list.draw }}</span>
                  <span :style="'width:'+ list.fromHomeJc / (list.homeJc + list.draw + list.fromHomeJc) * 100 +'%;'">{{ list.allFromHomeScore + list.fromHomeJc }}</span>
              </div>
              <div class="record">
                <a href="./record.html">竞猜记录
                    <i class="fa  fa-caret-right"></i></a>
              </div>
            </li>
          </div>
        </ul>
      </div>
      <!-- <div class="time-two">
        <ul class="quiz-start">
          <li class="quiz-title">
            <span class="quiz-time">2018-06-14
              <span>星期五</span>
              <span>小组赛</span>
            </span>
          </li>
          <li class="betting Waiting">
            <div class="bet-top">
              <ul>
                <li class="cou-left">
                  <span>
                    <img :src="list.homeImg" alt="">
                  </span>
                  <span>
                    <img src="../img/icon-redyz.png" alt="">
                  </span>
                  <span class="leftname">俄罗斯</span>
                  <span class="bomm">已压:2500</span>
                </li>
                <li class="wai-time">
                  <span>未开始</span>
                  <span>18:00</span>
                  <span>
                    <img src="../img/icon-grepzj.png" alt="">
                  </span>
                  <span class="bomm">已压:2500</span>
                </li>
                <li class="cou-right">
                  <span>
                   <img :src="list.fromHomeImg" alt="">
                  </span>
                  <span>
                    <img src="../img/iocn-blueyz.png" alt="">
                  </span>
                  <span class="rightname">沙特阿拉伯</span>
                  <span class="bomm">已压:2500</span>
                </li>
              </ul>
            </div>
            <div class="bet-bom">
              <span>231312312</span>
              <span>21312</span>
              <span>1241245125</span>
            </div>
            <div class="record">竞猜记录
              <i class="fa  fa-caret-right"></i>
            </div>
          </li>
          <li class="ditStart">
            <ul>
              <li class="dit-left">
                <span>未决出</span>
                <span>?</span>
              </li>
              <li class="ditcenter">
                <span>未开始</span>
                <span>18:00</span>
              </li>
              <li class="ditright">
                <span>?</span>
                <span>未决出</span>
              </li>
            </ul>
          </li>
        </ul>
      </div> -->

    </div>
  </div>

  <script src="../js/jquery-3.2.1.min.js"></script>
  <script src="../js/size.js"></script>
  <script src="../js/underscore.js"></script>
  <script src="../js/vue.js"></script>
  <script>
    var operation=[];
    // var subArr = ``;
    var userId ='d1db0a7e-0286-4e38-ba70-121e6817e548'
    var Quiz = new Vue({
      el: "#quizs",
      data: {
        show: false,
        userInfo:[],
        countries: [],
        // dt:[],
      },
      mounted() {
        this.getUserInfo();
        // this.postCoin();
        this.getCom();
        this.qingsuan();
      },
      methods: {
        //获取用户信息
        getUserInfo:function(){
          $.ajax({
            url:`http://2333.moemoe.la/api/worldcup/coin/get/${userId}`,
            dataType:'json',
            success:function(data){
              Quiz.userInfo = data.data;
              console.log(Quiz.userInfo)
            }
          })
        },
        //增加节操
        postCoin:function(){
          $.ajax({
            url:'http://2333.moemoe.la/api/worldcup/coin/save',
            contentType: 'application/json',
            type:'POST',
            dataType:'json',
            data: JSON.stringify({
                coin: 0,
                operateType: 1,
                userId: userId
              }),
            success:function(data){
              // console.log(data);
            }
          })
        },
        //单场竞猜数据
        getCom:function(){
          $.ajax({
            url:'http://localhost:4081/worldcup/getCom',
            dataType:'json',
            data:{id:userId},
            success:function(data){
              console.log(data);
              Quiz.countries = data;
              _.each(data.dt, function (item, index) {
                Quiz.countries.common[item.id-1].list[item.cId-1][item.value] += +item.num;
              });
            }
          })
        },
        close:function(){
          this.show = !this.show;
        },

        //押注弹出层显示
        popShow: function (value,list,parentKey,index,jc,id,cid) {
          if (value!= "平局") {
            operation.push(list[value],parentKey,index,jc,id,cid);
          }
          else{
            operation.push("平局",parentKey,index,jc,id,cid);
          }
          this.show = !this.show;
        },
        //押注节操点击事件获取数量
        bet:function(num){
          if (operation) {
            if (operation[3] == "homeJc") {
              operation.push({homeJc: num, draw: 0, fromHomeJc: 0},num)
            }
            else if (operation[3] == "fromHomeJc"){
              operation.push({homeJc: 0, draw: 0, fromHomeJc: num},num)
            }
            else{
              operation.push({homeJc: 0, draw: num, fromHomeJc: 0},num)
            }

          }
          console.log(operation)
          Quiz.countries.common[operation[1]].list[operation[2]][operation[3]] += operation[7];
          //上传押注记录
          $.ajax({
            url:'http://localhost:4081/worldcup/Record',
            dataType:'json',
            data:{
                userId: userId,
                name: Quiz.userInfo.userName,
                id: operation[4],
                cId: operation[5],
                countries: operation[0],
                num: +operation[7],
                value: operation[3],
                score: operation[6]
              },
            success:function(data){
              // console.log(data)
              // data.status == 1 ? alert("押注成功!") : alert("押注失败!");
            }
          });

          operation=[];
          //扣除节操
          $.ajax({
            url:'http://2333.moemoe.la/api/worldcup/coin/save',
            contentType: 'application/json',
            type:'POST',
            dataType:'json',
            data: JSON.stringify({
                coin: num,
                operateType: 2,
                userId: userId
              }),
            success:function(data){
              console.log(data);
              if (data.state== 200) {
                Quiz.userInfo.coin -=num;
                Quiz.show = !Quiz.show;
              }
            }
          })
        },

        bet2:function(){
          alert("节操余额不足!");
        },
        qingsuan:function(){
          var a = window.location.href.toString().split("?")[1];
          if (a == "qingsuan") {
              $.ajax({
                url:'http://localhost:4081/worldcup/invoicing',
                dataType:'json',
                data:{value:window.location.href.toString().split("?")[1]},
                success:function(data){
                  console.log(data)
                }
            });
          }
        }
      },
    });
  </script>
</body>

</html>